import Vue from 'vue'
import bus from '@/components/storybook/utilties/bus'
import { GlobalTimeformat } from '@/utils/common'


export const LinkedWidgetsActionTemplate = Vue.component('LinkedWidgetsActionTemplate', {
  template:
    `
      <div class="flex items-center" v-if="$data.data.tenantCode === $store.state.user.tenantCode||$data.data.tenantCode==='1001'">
        <el-button plain size="mini" type="primary" @click="onView" >Design</el-button>
        <el-button plain size="mini" type="danger"   @click="onDelete" v-if="hasDelate">Delete</el-button>
      </div>
    `,
  computed: {
    hasDelate(){
      let widgetadmin = this.$hasPermission('sys:widget:widgetadmin') ? 1 : 0
      let deleteAuth = this.$hasPermission('sys:widget:delete') ? 1 : 0
      let isCustom = this.$data.data.businessType === 'Custom' ? 1 : 0

      return widgetadmin + deleteAuth + isCustom >= 2 && !this.$data.data.reuse
    }
  },
  methods: {
    onView () {
      bus.$emit('event:view-linked-widget', this.$data.data)
    },
    onDelete () {
      bus.$emit('event:delete-linked-widget', this.$data.data)
    }
  }
})

export const TimeFormatTemplate = Vue.component('TimeFormatTemplate', {
  template:
    `
      <span>
        {{timeformat($data.data.updateTime||$data.data.updateDate)}}
      </span>
    `,
  methods: {
    timeformat (time) {
      return GlobalTimeformat(time, 'HH:mm')
    }
  }
})



export const RenderLinkedWidgetsAction = () => {
  return {
    template: LinkedWidgetsActionTemplate
  }
}

export const RenderTimeFormat = () => {
  return {
    template: TimeFormatTemplate
  }
}
